<template>
	<div class="screen_wrap echarts_box">	
		<corner></corner>
		<div class="body">			
            <title1 title="污染源企业数、地表水点位数统计"></title1>
	    	<div class="statistics_wrap">
                <div class="section section1">
                	<img src="/img/bigScreen/49.png" alt="" style="width: 85px;"/>
                	<div class="word">
                		<div class="word2">污染源(水)</div>
                		<div class="word1">{{contaminated}}</div>                		
                	</div>                	                	
                </div>
                <div class="section section1">
                	<img src="/img/bigScreen/48.png" alt="" style="width: 85px;"/>
                	<div class="word">
                		<div class="word2">地表水</div>
                		<div class="word1">{{swaq}}</div>                		
                	</div>                	                	
                </div>             
	    	</div>
        </div>   
	</div>
</template>	

<script>
	import { getWaterNum } from "@/api/bigScreen/bigScreen";
	import corner from '../public/corner'
	import title1 from '../public/title1'	
	export default {
		components: {
			corner,title1
		},		
		data() {
			return {
                contaminated:0,
                swaq:0
			}

		},
		mounted() {
            this.init()
		},
		methods: {
		    init(){
		    	getWaterNum().then(res=>{
		    		this.contaminated=res.data.data[0].num
		    		this.swaq=res.data.data[1].num
		    	})
		    }
		}
	}
</script>
<style lang="scss" scoped>
.screen_wrap{height: 100%;position: relative;border:1px solid #12B8E8;
   *{box-sizing: border-box;}
}
.body{
  height: 100%;	
  display: flex;flex-direction: column;
  .statistics_wrap{flex: 1;display: flex;}	
  .section{flex: 1;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;
    .word{margin-top: 10px;text-align: center;
       .word1{font-size: 20px;font-family:yjsz;margin-bottom: 4px;color: #15FEFE;}
       .word2{font-size: 14px;margin-bottom: 5px;color: #15FEFE;}
    }
  }
}
</style>

